<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-date-picker class="w300" v-model="times" type="daterange" align="right" placeholder="请选择日期范围" :picker-options="pickerOptions2" @change="reupdate" v-qx="permission.date">
            </el-date-picker>
            <el-button type="primary" @click="openRizhi">日志报表</el-button>
        </div>
        <el-tabs v-model="posName" @tab-click="handleClick">
            <el-tab-pane label="本期收入" name="1">
                <el-table :data="list1" :stripe="true" show-summary :summary-method="getSummaries">
                    <el-table-column prop="accountid" label="#"></el-table-column>
                    <el-table-column prop="name" label="账户名称"></el-table-column>
                    <el-table-column prop="accounttype" label="账户类型">
                        <template slot-scope="scope">
                            <Tags :typeValue="scope.row.accounttype" typeName="accountType"></Tags>
                        </template>
                    </el-table-column>
                    <el-table-column prop="summoney" label="收款金额">
                        <template slot-scope="scope">{{scope.row.summoney}}元</template>
                    </el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="look(scope.row)" v-qx="permission.info"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="本期支出" name="2">
                <el-table :data="list2" :stripe="true" show-summary :summary-method="getSummaries">
                    <el-table-column prop="accountid" label="#"></el-table-column>
                    <el-table-column prop="name" label="账户名称"></el-table-column>
                    <el-table-column prop="accounttype" label="账户类型">
                        <template slot-scope="scope">
                            <Tags :typeValue="scope.row.accounttype" typeName="accountType"></Tags>
                        </template>
                    </el-table-column>
                    <el-table-column prop="summoney" label="支出金额">
                        <template slot-scope="scope">{{scope.row.summoney}}元</template>
                    </el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="look(scope.row)" v-qx="permission.info"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="本期收益" name="3">
                <el-table :data="list3" :stripe="true" show-summary :summary-method="getSummaries">
                    <el-table-column prop="accountid" label="#"></el-table-column>
                    <el-table-column prop="name" label="账户名称"></el-table-column>
                    <el-table-column prop="accounttype" label="账户类型">
                        <template slot-scope="scope">
                            <Tags :typeValue="scope.row.accounttype" typeName="accountType"></Tags>
                        </template>
                    </el-table-column>
                    <el-table-column prop="summoney" label="收益金额">
                        <template slot-scope="scope">{{scope.row.summoney}}元</template>
                    </el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="look(scope.row)" v-qx="permission.info"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import C from '#/src/common/common.js'
import Settlement from '#/src/shop/settlement.js'
import Tags from '@/components/orderTags.vue'

export default {
    name: 'moneyList',
    data() {
        return {
            list1: [],
            list2: [],
            list3: [],
            posName: '1',
            aaamoney: '0',
            permission: {
                date: 'moneyinfo_date',
                info: 'moneyinfo_info',
            },
            currt: '',
            times: [new Date(), new Date()],
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, td])
                    }
                }]
            }
        }
    },
    methods: {
        //计算合计行
        getSummaries: function(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总金额'
                    return
                }
                const values = data.map(item => Number(item[column.property]))
                if (!values.every(value => isNaN(value))) {
                    sums[3] = values.reduce((prev, curr) => {
                        const value = Number(curr)
                        if (!isNaN(value)) {
                            return prev + curr
                        } else {
                            return prev
                        }
                    }, 0)
                    sums[3] += ' 元'
                } else {
                    sums[index] = ''
                }
            })

            return sums
        },
        handleClick: function(tab, event) {
            this.posName = tab.name
            this.reupdate()
        },
        look: async function(row) {
            if (!this.times) {
                let tm = new Date().setHours(0, 0, 0).valueOf()
                this.times = [tm, tm + 86400]
            } else {
                if (typeof this.times[0] == 'number') {
                    await C.openBrowserWindow('/moneyInfo', { id: row.accountid, times: this.times, tp: this.posName }, { width: 1400, height: 800, useSpa: true, spaModel: 'shop', transparent: true, frame: false })
                    return false
                }
                let aaa = this.times[0].getHours()
                let bbb = this.times[0].getMinutes()
                let ccc = this.times[0].getSeconds()
                let ddd = this.times[0].getMilliseconds()
                if (aaa == bbb == ccc == ddd) {
                    this.times = [
                        Math.round(new Date(this.times[0]).setHours(0, 0, 0).valueOf()),
                        Math.round(new Date(this.times[1]).setHours(0, 0, 0).valueOf()),
                    ]
                } else {
                    this.times = [
                        Math.round(new Date(this.times[0]).setHours(0, 0, 0).valueOf()),
                        Math.round(new Date(this.times[0]).setHours(0, 0, 0).valueOf()) + 86400000,
                    ]
                }
            }
            await C.openBrowserWindow('/moneyInfo', { id: row.accountid, times: this.times, tp: this.posName }, { width: 1400, height: 800, useSpa: true, spaModel: 'shop', transparent: true, frame: false })
        },

        sizeChange: function(val) {
            this.page.limits = val
            this.reupdate()
        },

        currentChange: function(val) {
            this.page.pages = val
            this.expands = []
            this.reupdate()
        },

        reupdate: async function() {
            var that = this
            if (!this.times) {
                this.times = [new Date(), new Date()]
            }
            let res = await C.ajax('/shop/money/xianjinlog', { times: JSON.stringify(that.times), lx: that.posName }, 'post')
            if (res) {
                if (this.posName == 1) this.list1 = res
                else if (this.posName == 2) this.list2 = res
                else if (this.posName == 3) this.list3 = res
                var aaa = []
                for (var i = 0; i < res.length; i++) {
                    aaa.push(res[i].summoney)
                }
                var bbb = 0
                aaa.forEach((row) => {
                    bbb += row
                })
                that.aaamoney = bbb
            }
        },

        async openRizhi() {
            await Settlement.openSettlement()
        }

    },
    mounted: function() {
        this.reupdate()
    },
    components: { Tags }
}
</script>